<template>
    <div class="bar-container">
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
    name: 'StaticBar',
})
// 饼图
export default class StaticBar extends Vue {
    @Prop() echartData;
    chartInstance: any = null;

    @Watch('echartData', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }
    mounted() {
        this.initChart();
    }

    initChart() {
        const _this = this;
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            color: this.echartData.color,
            animation: false,
            grid: {
                top: '19%',
                bottom: '18%', // 也可设置left和right设置距离来控制图表的大小
                left: '3%',
                right: '2%',
            },
            // tooltip: {
            //     show: true,
            //     confine: true,
            //     position: 'right',
            //     backgroundColor: '#707175',
            //     // borderColor: 'rgba(0,0,0,0.1)',
            //     textStyle: {
            //         color: '#fff',
            //     },
            //     formatter: (param) => {
            //         // TODO
            //         let data = '';
            //         // if (param.seriesName == '一致条目') {
            //         //     data = _this.echartData['succeedPercent']['componentIndex'];
            //         // } else {
            //         //     data = _this.echartData['failedPercent']['componentIndex'];
            //         // }
            //         console.log(param, 'bar12121');
            //         //  + data + '%'
            //         return param.name + '<br/>' + param.seriesName + ':' + param.value + '个' + '&nbsp';
            //     },
            // },
            legend: {
                selectedMode: false,
                itemWidth: 16,
                itemHeight: 16,
                // bottom: '4%',
            },
            xAxis: {
                data: this.echartData.tags.map((item) => item.name + '类'),
                axisTick: {
                    show: false, // 隐藏X轴刻度
                },
                axisLine: {
                    show: true,
                },
                axisLabel: {
                    // margin: 10,
                    textStyle: {
                        fontSize: 11,
                    },
                },
            },
            yAxis: [
                {
                    type: 'value',
                    // name: '次',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            // color: "rgba(255,255,255,0.3)"
                        },
                    },
                    splitNumber: 3,
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#18364d',
                            // color: ['rgba(255,255,255,0.3)']
                        },
                    },
                    nameTextStyle: {
                        // color: "#DEEBFF",
                        fontSize: 12,
                        lineHeight: 0,
                    },
                    axisLabel: {
                        show: true,
                        margin: 2,
                        fontSize: 12,
                        textStyle: {
                            // color: "#DEEBFF"
                        },
                    },
                    axisTick: {
                        show: false, // 隐藏X轴刻度
                    },
                },
            ],
            series: [
                {
                    name: this.echartData.name[0],
                    type: 'bar',
                    barWidth: 18,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                fontWeight: 'bold',
                                color: this.echartData.color[0],
                            },
                        },
                    },
                    data: this.echartData.succeed,
                    z: 10,
                    zlevel: 2,
                },
                {
                    name: this.echartData.name[1],
                    type: 'bar',
                    barWidth: 18,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                fontWeight: 'bold',
                                color: this.echartData.color[1],
                            },
                        },
                    },
                    data: this.echartData.failed,
                    z: 10,
                    zlevel: 2,
                },
            ],
        };
        this.chartInstance.setOption(initOption);
    }

    updateChart(e) {
        const _this = this;
        const dataOption = {
            color: this.echartData.color,
            xAxis: { data: this.echartData.tags },
            tooltip: {
                show: true,
                confine: true,
                position: 'right',
                backgroundColor: '#707175',
                // borderColor: 'rgba(0,0,0,0.1)',
                textStyle: {
                    color: '#fff',
                },
                formatter: (param) => {
                    let data = '';
                    if (param.seriesName === '一致条目' || param.seriesName === '一致明细') {
                        data = _this.echartData['succeedPercent'][param.dataIndex];
                    } else {
                        data = _this.echartData['failedPercent'][param.dataIndex];
                    }
                    return param.name + '<br/>' + param.seriesName + ':' + param.value + '个' + '&nbsp' + data;
                },
            },
            series: [
                {
                    name: this.echartData.name[0],
                    data: this.echartData.succeed,
                    itemStyle: {
                        normal: {
                            label: { color: this.echartData.color[0] },
                        },
                    },
                },
                {
                    name: this.echartData.name[1],
                    data: this.echartData.failed,
                    itemStyle: {
                        normal: {
                            label: { color: this.echartData.color[1] },
                        },
                    },
                },
            ],
        };
        this.chartInstance.setOption(dataOption);
    }

    dispose() {
        this.chartInstance.dispose(); // 销毁实例
    }
}
</script>

<style scoped>
.bar-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
